<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>可视化综合指挥平台</title>
		<link rel="stylesheet" href="css/zTreeStyle.css">
		<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
		<link rel="stylesheet" href="css/metroStyle.css">
		<link rel="stylesheet" href="css/monitor.css">
		<link rel="stylesheet" href="css/plot/plot.css">
		<link rel="stylesheet" href="css/index.css">
		<script src="js/jquery-2.2.1.min.js"></script>
		<script src="js/jquery.mousewheel.min.js"></script>
		<script src="js/jquery.mCustomScrollbar.min.js"></script>
		<script src="My97DatePicker/WdatePicker.js"></script>
		<script src="js/ztree/js/jquery.ztree.core-3.5.min.js"></script>
		<script src="js/ztree/js/jquery.ztree.exhide-3.5.min.js"></script>
		<script src="js/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>
		<script src="js/ztree/js/jquery.ztree.exedit-3.5.min.js"></script>
		<script src="js/jwplayer/jwplayer.js"></script>
		<script src="js/location.js"></script>
		<script src="js/monitor.js"></script>
		<script type="text/javascript" src="js/select.js" ></script>
		<script src="js/index.js"></script>
	</head>

	<body>
		<!-- 顶部 bar -->
		<header class="top-bar">
			<img class="logo" src="img/logo.png" alt="东莞华南设计创新院" />
			<h1>可视化综合指挥平台</h1>
			<div class="top-op">
				<div class="resource">
					<img src="img/folder.png" />
					<span>资源管理</span>
				</div>
				<div class="resource">
					<img src="img/folder.png" />
					<span>资源管理</span>
				</div>
				<div class="resource">
					<img src="img/folder.png" />
					<span>资源管理</span>
				</div>
			</div>
		</header>

		<!-- 主体区 -->
		<section class="body-container">
			<!-- 三维地图 -->
			<div class="map3d">
				<!-- 地图显示 -->
				<div class="bg-map">
					<img src="img/map3d.png">
				</div>
				<!-- 地图操作 -->
				<div class="map-op">

				</div>
			</div>

			<!-- 天气 -->
			<div class="weather">

			</div>

			<!-- 右侧-二维地图 -->
			<div class="map2d">
				<!-- 地图显示 -->
				<div class="bg-map">
					<img src="img/map2d.png">
				</div>

				<!-- 二维地图按钮 -->
				<div class="mapF2DButton">
					<div class="mapF2DBtn btn1" title="距离量算"></div>
					<div class="mapF2DBtn btn2" title="面积量算"></div>
					<div class="mapF2DBtn btn3" title="图层选项"></div>
					<div class="mapF2DBtn btn4" title="框选查询"></div>
					<div class="mapF2DBtn btn5" title="清除选项"></div>
				</div>
				<!-- 二级清除按钮 -->
				<div class="mapF2DDeleteButton">
					<div class="mapF2DBtn btn6" title="清除搜索"></div>
					<div class="mapF2DBtn btn7" title="清除标绘"></div>
					<div class="mapF2DBtn btn8" title="清除分析"></div>
					<div class="mapF2DBtn btn9" title="清除框选"></div>
					<div class="mapF2DBtn btn10" title="清除量算"></div>
					<div class="mapF2DBtn btn11" title="清除全部"></div>
				</div>

				<!-- 二维地图右侧工具栏 -->
				<div class="right-bar">
					<div class="panel-controller location" data-panel="location-panel">
						<div></div>
						<span>定位信息</span>
					</div>
					<!-- 有控制面板的必须加panel-controller的class,且data-panel指向对应面板的class名 -->
					<div class="panel-controller monitor" data-panel="monitor-panel">
						<div></div>
						<span>视频监控</span>
					</div>
					<div class="panel-controller plot" data-panel="plot-panel">
						<div></div>
						<span>动态标绘</span>
					</div>
					<div class="panel-controller select" data-panel="select-panel">
						<div></div>
						<span>地物框选</span>
					</div>
				</div>

				<!-- 面板必须加panel的class，且data-controller指向它的控制者的class -->
				<div class="panel location-panel" data-controller="location">
					<p class="panel-title">
						定位信息
						<span class="exit">退出</span>
					</p>
					<div class="resource-list">
						<p class="list-title">资源列表</p>
						<ul id="resourceList" class="ztree">

						</ul>
					</div>
					<div class="resource-search">
						<p class="list-title">资源搜索</p>
						<form>
							<div>
								<span>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</span>
								<input type="text" name="name"></div>
							<div>
								<span>类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</span>
								<!-- <input type="text" name="type"> -->
								<select name="type">
									<option value="car">车辆</option>
									<option value="end">终端</option>
								</select>
							</div>
							<div>
								<span>开始时间</span>
								<input class="Wdate" type="text" name="start" onClick="WdatePicker({skin: 'twoer', dateFmt: 'yyyy-MM-dd HH:mm'})">
							</div>
							<div>
								<span>结束时间</span>
								<input class="Wdate" type="text" name="end" onClick="WdatePicker({skin:'twoer', dateFmt: 'yyyy-MM-dd HH:mm'})">
							</div>
							<div>
								<button type="reset">清除</button>
								<button type="submit">搜索</button>
							</div>
						</form>
					</div>

				</div>

				<div class="panel monitor-panel" data-controller="monitor">
					<p class="panel-title">
						视频监控
						<span class="exit">退出</span>
					</p>
					<div class="monitor-filter">
						<!-- <img src="img/filter.png"> -->
						<select id="type" class="styled-select">
							<option value="">全部数据</option>
							<option value="实时监控">实时监控</option>
							<option value="历史数据">历史数据</option>
						</select>
						<input type="text" id="search" placeholder="输入筛选关键字" />
					</div>
					<ul id="monitor-list" class="ztree showIcon"></ul>
				</div>

				<div class="panel select-panel" data-controller="select">
					<p class="panel-title">
						地物框选
						<span class="exit">退出</span>
					</p>
					<div class="select-list">
						<p class="list-title">图形选择</p>
						<ul id="selectList">
							<li class="select-item">
								<img src="img/select/circular.png">
								<img src="img/select/square.png">
								<img src="img/select/polygon.png">
								<img src="img/select/move.png">
							</li>
						</ul>
					</div>
					<div class="select-list">
						<p class="list-title">框选图层列表</p>
						<ul id="layerList">
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
							<li class="select-item"><input type="checkbox" />图层1</li>
						</ul>
					</div>
				</div>

				<div class="panel plot-panel" data-controller="plot">
					<p class="panel-title">
						动态标绘
						<span class="exit">退出</span>
					</p>
					<ul class="plot-list">
						<li class="item-title">绘制点标</li>
						<li class="plot-item">
							<ul>
								<li class="img plottingPoint_1_1"></li>
							</ul>
							<img src="img/plot/dot/dot1.png">
							<img src="img/plot/dot/dot2.png">
						</li>
						<li class="item-title">绘制线标</li>
						<li class="plot-item">
							<img src="img/plot/line/line1.png">
							<img src="img/plot/line/line2.png">
							<img src="img/plot/line/line3.png">
							<img src="img/plot/line/line4.png">
							<img src="img/plot/line/line5.png">
							<img src="img/plot/line/line6.png">
							<img src="img/plot/line/line7.png">
							<img src="img/plot/line/line8.png">
							<img src="img/plot/line/line9.png">
							<img src="img/plot/line/line10.png">
						</li>
						<li class="item-title">绘制面标</li>
						<li class="plot-item">
							<img src="img/plot/area/area1.png">
							<img src="img/plot/area/area2.png">
							<img src="img/plot/area/area3.png">
							<img src="img/plot/area/area4.png">
							<img src="img/plot/area/area5.png">
							<img src="img/plot/area/area6.png">
							<img src="img/plot/area/area7.png">
							<img src="img/plot/area/area8.png">
						</li>
						<li class="item-title">绘制旗标</li>
						<li class="plot-item">
							<img src="img/plot/flag/flag1.png">
							<img src="img/plot/flag/flag2.png">
							<img src="img/plot/flag/flag3.png">
							<img src="img/plot/flag/flag4.png">
							<img src="img/plot/flag/flag5.png">
							<img src="img/plot/flag/flag6.png">
						</li>
						<li class="item-title">绘制箭标</li>
						<li class="plot-item">
							<img src="img/plot/arrow/left.png">
							<img src="img/plot/arrow/right.png">
							<img src="img/plot/arrow/up.png">
							<img src="img/plot/arrow/down.png">
							<img src="img/plot/arrow/upleft.png">
							<img src="img/plot/arrow/upright.png">
							<img src="img/plot/arrow/downleft.png">
							<img src="img/plot/arrow/downright.png">
							<img src="img/plot/arrow/up_left.png">
							<img src="img/plot/arrow/up_right.png">
							<img src="img/plot/arrow/down_left.png">
							<img src="img/plot/arrow/down_right.png">
						</li>
						</li>
					</ul>
				</div>

				<!-- 地图操作 -->
				<div class="search unexpanded">
					<div class="search-box">
						<form>
							<!-- input尾和button的头之间不能有空格 -->
							<input type="text" name="search-text" placeholder="搜索地址，如：超市"><button type="reset">×</button>
						</form>
						<div class="search-btn">

						</div>
					</div>
					<div class="search-result">
						<ul class="result-list">
							<li class="list-item">
								<div class="marker">
									<span>1</span>
								</div>
								<div class="info">
									<p>站台1号</p>
									<p>北京市朝阳区1号站台</p>
									<p>电话：020-23456758</p>
								</div>
							</li>
							<li class="list-item">
								<div class="marker">
									<span>2</span>
								</div>
								<div class="info">
									<p>站台2号</p>
									<p>北京市朝阳区2号站台</p>
									<p>电话：020-23456758</p>
								</div>
							</li>
							<li class="list-item">
								<div class="marker">
									<span>3</span>
								</div>
								<div class="info">
									<p>站台3号</p>
									<p>北京市朝阳区3号站台</p>
									<p>电话：020-23456758</p>
								</div>
							</li>
							<li class="list-item">
								<div class="marker">
									<span>4</span>
								</div>
								<div class="info">
									<p>站台4号</p>
									<p>北京市朝阳区4号站台</p>
									<p>电话：020-23456758</p>
								</div>
							</li>
							<li class="list-item">
								<div class="marker">
									<span>5</span>
								</div>
								<div class="info">
									<p>站台5号</p>
									<p>北京市朝阳区5号站台</p>
									<p>电话：020-23456758</p>
								</div>
							</li>
						</ul>
						<div class="result-tip">
							<p class="total">共<span>8</span>条结果</p>
							<div class="pagination">
								<span class="pre">&nbsp;&nbsp;</span>
								<span class="active">1</span>
								<span>2</span>
								<span class="next">&nbsp;&nbsp;</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!--平面图-->
			<div class="plan-image">
				<div class="" style="">

				</div>
			</div>

			<!--融合通讯-->
			<div class="info">
				<div class="" style="">

				</div>
			</div>

			<!--视频窗口-->
			<div class="video-list">
				<div class="" style="">
					<ul class="video-play-list">
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>

		</section>

	</body>

</html>